var data = [];
layui.use(['form','laydate','laypage','layer'], function(){
    var form = layui.form
        ,layer = layui.layer
        ,laypage=layui.laypage;
        //自定义验证规则
        // form.verify({
        //     title: function(value){
        //         if(value.length < 0){
        //             return '标题不能为空';
        //         }
        //     }
        //     ,content: function(value){
        //         layedit.sync(editIndex);
        //     }
        // });

    // 分页
    let minX = (
        Math.floor(Math.random()*(118 - 100) + 100)
    ) + .994142;
    let minY = (
        Math.floor(Math.random()*(40 - 25) + 25)
    ) + .355468;
    for (let i = 0; i<26; i++){
        data.push({
            arrLenth: i+1,
            ID: i,
            mingchen: '分组名称'+ i,
            jingdu: minX,
            weidu: minY,
        })
    }
    pageList(data)

    // 分组添加
    $('#addGroup').click(function () {
        let data = $("#mapFrom").serializeArray();
        let msg = ''
        data.forEach(item=> msg += item.name +'：'+ item.value + '<br>' )
        layer.msg(msg)
    });


});


function pageList(data){
    let laypage = layui.laypage
    laypage.render({
        elem: 'demo20'
        ,limit: 13
        ,count: data.length
        ,jump: function(obj){
            //模拟渲染
            document.getElementById('ListData').innerHTML = function(){
                var arr = [],thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
                layui.each(thisData, function(index, item){
                    arr.push(
                        `
                         <tr>
                            <td>${ thisData[index].arrLenth }</td>
                            <td>${ thisData[index].mingchen }</td>
                            <td>${ thisData[index].weidu }</td>
                            <td>${ thisData[index].jingdu }</td>
                            <td>
                                <button class="table_bj"  onclick="edit(${ JSON.stringify(item).replace(/"/g, '&quot;') })">编辑</button>
                            </td>
                            <th>
                                <button class="table_clear" onclick="del(${ thisData[index].ID})">删除</button>
                            </th>
                        </tr>
                        `
                    )
                });
                return arr.join('');
            }();
        }
    });
}


// 编辑获取表单值
function edit(obj) {
    document.getElementById("getLng").value = obj.jingdu
    document.getElementById("getLat").value = obj.weidu
    layer.open({
        type: 1,
        title: '编辑',
        anim: 1,
        offset: 'auto',
        content: $('#addSheBei')
    });
}
// 删除
function del(obj){
    data.forEach((item, index)=> item.ID === obj ?  data.splice(index, 1) : '')
    layer.msg('删除成功!')
    pageList(data)
}
// 搜索
function Search(){
    let SearVal = document.getElementById('SearVal').value
    let add = data.filter((item)=> item.mingchen ===  SearVal.trim())
    pageList(add)
}

// 添加
$('#add').click(function () {
    layer.open({
        type: 1,
        title: '编辑',
        anim: 1,
        offset: 'auto',
        content: $('#addSheBei')
    });
});

// 添加
var map = new AMap.Map('container', {
    zoom: 2
});
AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
    let poiPicker = new PoiPicker({
        input: 'searchInput',
        placeSearchOptions: {
            map: map,
            pageSize: 5
        },
        searchResultsContainer: 'searchResults'
    });
    poiPicker.on('poiPicked', function(poiResult,e) {
        let source = poiResult.source,
            poi = poiResult.item,
            info = {
                location: poi.location.toString()
            };
        document.getElementById("getLng").value = poi.location.getLng();
        document.getElementById("getLat").value = poi.location.getLat()
    });
    map.on('click', function(e) {
        document.getElementById("getLng").value = e.lnglat.getLng();
        document.getElementById("getLat").value = e.lnglat.getLat()
    });
    poiPicker.onCityReady(function() {
        poiPicker.searchByKeyword('西山风景区');
    });
});
